<template>
	<view>
		<NvaHeader title="智慧工地"></NvaHeader>
		<view class="content">
			<view class="content-box">
				<view class="title-box">数据概览</view>
<!-- 				<view class="all-cost">
					<view class="all-cost-left"><u-count-to color="#ff4040" :start-val="0" :end-val="324234"></u-count-to></view>
					<view class="all-cost-left"></view>
					<view class="all-cost-right">总费用(元)</view>
				</view> -->
				<view class="info-box">
					<u-grid :col="2" align="left" :border="false">
						<u-grid-item class="border-bottom">
							<view class="item-num"><u-count-to color="#5c92ff" :start-val="0" :end-val="allData.project"></u-count-to></view>
							<view class="item-text">项目数据量</view>
						</u-grid-item>
						<u-grid-item class="border-bottom border-left">
							<view class="item-num"><u-count-to color="#5c92ff" :start-val="0" :end-val="allData.team"></u-count-to></view>
							<view class="item-text">运输车队数量</view>
						</u-grid-item>
						<u-grid-item>
							<view class="item-num"><u-count-to color="#5c92ff" :start-val="0" :end-val="allData.digger"></u-count-to></view>
							<view class="item-text">挖机数量</view>
						</u-grid-item>
						<u-grid-item class="border-left">
							<view class="item-num"><u-count-to color="#5c92ff" :start-val="0" :end-val="allData.transport"></u-count-to></view>
							<view class="item-text">运输车辆</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view class="springboard-box">
				<view class="title-box">常用功能</view>
				<view class="">
					<u-grid :col="3" :border="false">
						<u-grid-item @click="openPage('../../dataReport/index')">
							<image class="item-img" src="../../../static/statement.png" mode=""></image>
							<view class="grid-text">数据报表</view>
						</u-grid-item>
						<u-grid-item @click="openPage('../project/index')">
							<image class="item-img" src="../../../static/project.png" mode=""></image>
							<view class="grid-text">项目管理</view>
						</u-grid-item>
						<u-grid-item @click="openPage('../user/index')">
							<image class="item-img" src="../../../static/user.png" mode=""></image>
							<view class="grid-text">用户管理</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import header from '../../../components/header.vue';
import { getData } from '@/api/user.js'
export default {
	data() {
		return {
			num: 123.453 ,
			allData: {}
		};
	},
	components: {
		NvaHeader: header
	},
	created() {
		// 监听到下拉动作
		uni.$on('refresh', function(data) {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		});
		// 获取数据
		this.getAllData();
	},
	methods: {
		openPage(path){
			uni.navigateTo({
			    url: path
			});
		},
		getAllData(){
			getData().then(res =>{
				this.allData = res.result
				console.log(this.allData)
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding: 40rpx;
	.content-box {
		background-color: #ffffff;
		border-radius: 10rpx;
		.title-box {
			font-size: 30rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 70rpx;
			letter-spacing: 0rpx;
			color: #5c92ff;
			font-weight: bold;
			height: 110rpx;
			padding: 20rpx 60rpx;
			position: relative;
			border-bottom: 1px solid rgb(239, 239, 239);
		}
		.title-box::before {
			content: '';
			position: absolute;
			width: 8rpx;
			height: 40rpx;
			background-color: #007aff;
			left: 40rpx;
			top: 35rpx;
		}
		.all-cost {
			display: flex;
			padding: 10rpx 40rpx;
			border-bottom: 1px solid rgb(239, 239, 239);
			.all-cost-left {
				flex-grow: 1;
				font-size: 60rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0px;
				color: #ff4040;
				font-weight: bold;
			}
			.all-cost-right {
				flex-grow: 1;
				font-size: 24rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 84rpx;
				letter-spacing: 0px;
				color: #646c7f;
				text-align: right;
			}
		}
		.border-bottom {
			border-bottom: 1px solid rgb(239, 239, 239);
		}
		.border-left {
			border-left: 1px solid rgb(239, 239, 239);
		}
		.item-text {
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0px;
			color: #646c7f;
			text-align: left;
			padding-left: 40rpx;
			width: 100%;
		}
		.item-num {
			font-weight: bold;
			font-size: 48rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 84rpx;
			letter-spacing: 1px;
			color: #5c92ff;
			padding-left: 40rpx;
			width: 100%;
			font-weight: bold;
		}
	}
	.springboard-box {
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 40rpx;
		.title-box {
			font-size: 30rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 70rpx;
			letter-spacing: 0rpx;
			color: #5c92ff;
			font-weight: bold;
			height: 110rpx;
			padding: 20rpx 60rpx;
			position: relative;
			border-bottom: 1px solid rgb(239, 239, 239);
		}
		.title-box::before {
			content: '';
			position: absolute;
			width: 8rpx;
			height: 40rpx;
			background-color: #007aff;
			left: 40rpx;
			top: 35rpx;
		}
		.item-img {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 20rpx;
		}
	}
}
</style>
